<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>个人资料</title>
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="css/amazeui.min.css"/>
    <link rel="stylesheet" href="css/personalData.css"/>
    <style>
        .heart-box{
            float: left;
            margin:26px 10px;
        }
        .heart-box .icon-heart{
            background: url("images/icon-hearts1.png")no-repeat;
            width: 20px;
            height: 16px;
            display: block;
            background-size: 40px 16px;
            margin: 0 auto;
            background-position: -20px 0;
        }
        .heart-box .heart-red{
            background-position: 0 0;
        }
    </style>
</head>
<body>

<div class="header">
    <h2><a href="javascript:history.go(-1)" ><span></span>我的资料</a></h2>
</div>
<div data-am-widget="slider" class="mySlider am-slider am-slider-a1" id="demo-slider-0" data-am-slider='{&quot;directionNav&quot;:false}' >
    <ul class="mySliderUl am-slides">
        <li><img src="images/certification-icon.png" alt=""/></li>
    </ul>

</div>
<div class="basics clearfix">
    <span class="name">Lxiaom</span>
    <div class="heart-box">
        <i class="icon-heart"></i>
    </div>
    <span class="city"><i></i>北京</span>
</div>

<div class="certification-box">
    <h2>认证信息</h2>
    <p class="certification-info">认证信息 <span>未认证</span></p>
    <p class="certification-edu">学历 <span>未认证</span></p>
    <p class="certification-house">资产认证(房) <span>未认证</span></p>
    <p class="certification-car">资产认证(车) <span>未认证</span></p>
</div>

<div class="personal-box">
    <h2>个人信息</h2>
    <div class="personal-box1">
        <span>属猴</span>
        <span>射手座</span>
        <span>北京</span>
    </div>
    <div class="personal-box2">
        <p><span>工作</span>无</p>
        <p><span>教育</span>本科</p>
        <p><span>经济</span>无房无车</p>
        <p><span>性格</span>大方</p>
        <p><span>兴趣爱好</span>无</p>
        <p><span>父母情况</span>大方</p>
        <p><span>择偶要求</span>有车有房</p>
    </div>
</div>

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript">

    $(function () {
        $(".icon-heart").click(function(){
            if($(this).hasClass("heart-red")){
                $(this).removeClass("heart-red");
            }else{
                $(this).addClass("heart-red");
            }
        });
    });

</script>
</body>
</html>